(function($){

	var $body;
	var window_height = $(window).height();

	var init_set = function(){
		$body.css({
			'height': window_height + "px"
		});
	}

	var set_arrow = function(){
		var arrow_height = $('.yf-arrow').height();
		$('.yf-arrow').css({
			'top': (500 - arrow_height) / 2 + "px"
		});
	}

	$.fn.yf_photo = function(option){
		$body = $('#yf-show');
		_this = $(this);

		var html = '';

		html +=	'<div class="yf-show-windows">';
		html +=	'<div class="yf-photo-one yf-photo-left">';
		html +=	'<div class="yf-arrow yf-arrow-left">&lt;</div>';
		html += '<div class="yf-arrow yf-arrow-right">&gt;</div>';
		html += '</div>';

		html += '<div class="yf-photo-two yf-photo-left">';
		html += '<ul class="yf-photo-list">';
		html += '</ul>';
		html += '<div class="yf-photo-del">&times;</div>';
		html += '</div>';
		html += '</div>';

		$body.append(html);
		
		_this.hover(function(){
			$(this).find('.yf-view').show();
		}, function(){
			$(this).find('.yf-view').hide();
		});

		_this.find('img, .yf-view').click(function(){
			var img = _this.attr('data-img');
			//var thumb = _this.attr('data-thumb');
			var thumb = _this.attr('data-img');
		    img = img.split(',');
		    thumb = thumb.split(',');
			
		    if(img.length == 0)
		    {
		    	return;
		    }

			var img_html = '<img src="' + thumb[0] + '" class="newImg">';
			$('.yf-photo-one').append(img_html);

			var title = _this.attr('data-title');
			var title_html = '<div class="yf-photo-title">' + title + '</div>';
			$('.yf-photo-two').prepend(title_html);

			var all_img = "";
			for(var i = 0; i < img.length; i++)
			{
				if(i == 0)
				{
					//all_img += '<li class="yf-photo-act"><img src="' + img[i] + '" width="64px" height="64px"></li>';
					all_img += '<li style="background-image:url(\'' + img[i] + '\');" class="yf-photo-act" data-img="' + thumb[i] + '"><div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div></li>';
				}
				else
				{
					//all_img += '<li><img src="' + img[i] + '" width="64px" height="64px"></li>';
					all_img += '<li style="background-image:url(\'' + img[i] + '\');" data-img="' + thumb[i] + '"></li>';
				}
			}
			$('.yf-photo-list').append(all_img);
			
			$body.show();
			$(document.body).css("overflow","hidden");
			$('.newImg').each(function(){
				$(this).attr('style', '');
				if($(this).height() < $(this).width())
				{
					$(this).css('min-width','700px');
				}
				else
				{
					$(this).css('min-height','500px');
				}
				if ($(this).height()<500) {
					$(this).css('top',(500-$(this).height())/2+'px');
				}else{
					$(this).css('top','0px');
				}
			})
		});
		init_set();
		
		set_arrow();

		$body.on('click', '.yf-photo-del', function(){
			$body.hide();
			$(document.body).css("overflow","auto");
			$('.yf-photo-one').find('img').remove();
			$('.yf-photo-two').find('.yf-photo-title').remove();
			$('.yf-photo-list > li').each(function(){
				$(this).remove();
			});
		});

		$body.on('click', '.yf-arrow-left', function(){
			$('.yf-photo-list > li').each(function(i){
				var cname = $(this).attr('class');
				if(cname == 'yf-photo-act')
				{
					$(this).removeClass('yf-photo-act');
					$(this).find('.yf-photo-windows').remove();
					$(this).find('.yf-photo-check').remove();
					if(i == 0)
					{
						$('.yf-photo-list > li:last').addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}
					else
					{
						$(this).prev().addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}

					//var img_path = $('.yf-photo-act').find('img').attr('src');
					var img_path = $('.yf-photo-act').attr('data-img');
					$('.yf-photo-one > img').attr('src', img_path);
					$('.newImg').each(function(){
						$(this).attr('style', '');
						if($(this).height() < $(this).width())
						{
							$(this).css('min-width','700px');
						}
						else
						{
							$(this).css('min-height','500px');
						}
						if ($(this).height()<500) {
							$(this).css('top',(500-$(this).height())/2+'px');
						}else{
							$(this).css('top','0px');
						}
					})
					return false;
				}
			});
		});

		$body.on('click', '.yf-arrow-right', function(){
			$('.yf-photo-list > li').each(function(i){
				var cname = $(this).attr('class');
				if(cname == 'yf-photo-act')
				{
					$(this).removeClass('yf-photo-act');
					$(this).find('.yf-photo-windows').remove();
					$(this).find('.yf-photo-check').remove();
					var len = $('.yf-photo-list > li').length - 1;
					if(i == len)
					{
						$('.yf-photo-list > li:first').addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}
					else
					{
						$(this).next().addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
					}

					//var img_path = $('.yf-photo-act').find('img').attr('src');
					var img_path = $('.yf-photo-act').attr('data-img');
					$('.yf-photo-one > img').attr('src', img_path);
					$('.newImg').each(function(){
						$(this).attr('style', '');
						if($(this).height() < $(this).width())
						{
							$(this).css('min-width','700px');
						}
						else
						{
							$(this).css('min-height','500px');
						}
						if ($(this).height()<500) {
							$(this).css('top',(500-$(this).height())/2+'px');
						}else{
							$(this).css('top','0px');
						}
					})
					return false;
				}
			});
		});

		$body.on('click', '.yf-photo-list > li', function(){
			$('.yf-photo-list > li').each(function(i){
				$(this).removeClass('yf-photo-act');
				$(this).find('.yf-photo-windows').remove();
				$(this).find('.yf-photo-check').remove();
			});
				
			$(this).addClass('yf-photo-act').append('<div class="yf-photo-windows"></div><div class="yf-photo-check">&radic;</div>');
			//var img_path = $('.yf-photo-act').find('img').attr('src');
			var img_path = $('.yf-photo-act').attr('data-img');
			$('.yf-photo-one > img').attr('src', img_path);
			$('.newImg').each(function(){
				$(this).attr('style', '');
				if($(this).height() < $(this).width())
				{
					$(this).css('min-width','700px');
				}
				else
				{
					$(this).css('min-height','500px');
				}
				if ($(this).height()<500) {
					$(this).css('top',(500-$(this).height())/2+'px');
				}else{
					$(this).css('top','0px');
				}
			})
		});
	}
})(jQuery);
